import {
  LockOutlined,
  MobileOutlined,
} from '@ant-design/icons'
import {
  LoginFormPage,
  ProFormCaptcha,
  ProFormCheckbox,
  ProFormText,
} from '@ant-design/pro-components'
import {
  message, Tabs, Spin
} from 'antd'
import { useNavigate, useSearchParams } from 'react-router-dom'
import { useSelector } from 'react-redux'
import { useMutation } from '@apollo/client'
import { AUTH_TOKEN } from '@/utils/constants'
import { LOGIN, SEND_CODE_MSG } from '@/graphql/auth'
import { useTitle } from '@/hooks'
import { useGetUser } from '@/hooks/userHooks'
import { IState } from '@/utils/types'

import styles from './index.module.less'

interface IValue {
  tel: string
  code: string
  autoLogin: boolean
}

type IState = typeof IState

/**
 * 登录页面
 */
const Login = () => {
  const { loading } = useGetUser()
  const [run] = useMutation(SEND_CODE_MSG)
  const [login] = useMutation(LOGIN)
  const [params] = useSearchParams()
  const nav = useNavigate()
  const refetchHandler = useSelector((state: IState) => state.userInfo.refetchHandler)
  useTitle('登录')

  const loginHandler = async (values: IValue) => {
    const res = await login({
      variables: values,
    })
    const data = JSON.parse(res.data.login.data)
    if (res.data.login.code === 200) {
      if (values.autoLogin) {
        sessionStorage.setItem(AUTH_TOKEN, '')
        localStorage.setItem(AUTH_TOKEN, data.token)
      } else {
        localStorage.setItem(AUTH_TOKEN, '')
        sessionStorage.setItem(AUTH_TOKEN, data.token)
      }
      await refetchHandler()
      message.success(res.data.login.message)
      nav(params.get('orgUrl') || '/')
      return
    }
    message.error(res.data.login.message)
  }

  return (
    <Spin spinning={loading}>
      <div className={styles.container}>
        <LoginFormPage
          initialValues={{ tel: '13083077845' }}
          onFinish={loginHandler}
          backgroundImageUrl="https://gw.alipayobjects.com/zos/rmsportal/FfdJeJRQWjEeGTpqgBKj.png"
          logo="http://water-drop-assets.oss-cn-hangzhou.aliyuncs.com/images/henglogo.png"
        >
          <Tabs
            centered
            items={[{
              key: 'phone',
              label: '手机号登录',
            }]}
          />
          <>
            <ProFormText
              fieldProps={{
                size: 'large',
                prefix: <MobileOutlined className="prefixIcon" />,
              }}
              name="tel"
              placeholder="手机号"
              rules={[
                {
                  required: true,
                  message: '请输入手机号！',
                },
                {
                  pattern: /^1\d{10}$/,
                  message: '手机号格式错误！',
                },
              ]}
            />
            <ProFormCaptcha
              fieldProps={{
                size: 'large',
                prefix: <LockOutlined className="prefixIcon" />,
              }}
              captchaProps={{
                size: 'large',
              }}
              placeholder="请输入验证码"
              captchaTextRender={(timing, count) => {
                if (timing) {
                  return `${count} ${'获取验证码'}`
                }
                return '获取验证码'
              }}
              phoneName="tel"
              name="code"
              rules={[
                {
                  required: true,
                  message: '请输入验证码！',
                },
              ]}
              onGetCaptcha={async (tel: string) => {
                const res = await run({
                  variables: {
                    tel,
                  },
                })
                if (res.data.sendCodeMsg.code === 200) {
                  message.success(res.data.sendCodeMsg.message)
                } else {
                  message.error(res.data.sendCodeMsg.message)
                }
              }}
            />
          </>
          <div
            style={{
              marginBlockEnd: 24,
            }}
          >
            <ProFormCheckbox noStyle name="autoLogin">
              自动登录
            </ProFormCheckbox>
          </div>
        </LoginFormPage>
      </div>
    </Spin>
  )
}

export default Login
